<template>
    <div class="editShopCont" :style="'min-height: ' + docheight + 'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="formCont">
          <div class="addTip">店铺信息设置</div>
          <div class="formItem">
            <div class="formName">店铺头像</div>
            <cropper-com :propImg="shopInfo.shop_logo" @successCropper="getLogoFn"></cropper-com>
          </div>
          <div class="formItem">
            <van-field
              maxlength="15"
              v-model="shopInfo.shop_name"
              label="店铺名称"
              placeholder="请输入店铺名称"
            />
          </div>
          <div class="formItem noflex">
            <van-field
                maxlength="11"
                v-model="shopInfo.shop_phone"
                type="digit"
                label="店铺电话"
                placeholder="请输入店铺联系电话"
            />
          </div>
          <div class="formItem">
            <van-field
              v-model="shopInfo.shop_introduce"
              rows="3"
              maxlength="200"
              show-word-limit
              autosize
              label="店铺介绍"
              type="textarea"
              placeholder="请输入店铺介绍"
            />
          </div>
          <div class="formItem">
            <van-field
              v-model="shopInfo.shop_notice"
              rows="3"
              maxlength="200"
              show-word-limit
              autosize
              label="公告消息"
              type="textarea"
              placeholder="请输入公告消息"
            />
          </div>
          <div class="formItem noflex">
            <div>
              <van-field
                v-model="shopInfo.shop_address"
                name="adress"
                id="serchid"
                label="店铺地址"
                placeholder="请输入店铺详细地址"
              />
            </div>
          </div>
          <div class="formItem hasMargin">
            <div class="formName">背景图片</div>
            <def-up-img
              :propImg="shopInfo.shop_background_img"
              @upImgSuccess="getBackImg"
            ></def-up-img>
          </div>
        </div>
        <save-btn @saveClick="saveFn" value="保存信息"></save-btn>
      </div>
      <toast
        v-model="showToast"
        position="middle"
        width="50%" type="text"
        :time="1000"
        >{{ showText }}</toast
      >
      <sub-load v-if="showLoad"></sub-load>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
  import { Toast } from "vux";
  import topcpm from "@/components/topcpm.vue";
  import cropperCom from "@/components/public/cropperCom.vue";
  import defUpImg from "@/components/public/defUpImg.vue";
  import saveBtn from "@/components/public/saveBtn.vue";
  import subLoad from "@/components/public/subLoad.vue";
  import getLoad from "@/components/public/getLoad";
  import getTimeOut from "@/components/public/getTimeOut";
  import { show,save } from "@/http/api";
  export default {
    components: {
      getLoad,
      getTimeOut,
      subLoad,
      Toast,
      topcpm,
      cropperCom,
      defUpImg,
      saveBtn
    },
    data() {
      return {
        showTimeOut: false,
        showCont: false,
        showLoad: false,
        showText: "",
        showToast: false,
        shopInfo: {
          shop_logo: "",
          shop_name: "",
          shop_phone: "",
          shop_introduce: "",
          shop_address: "",
          shop_background_img: "",
        },
      };
    },
    props: {},
    methods: {
      saveFn() {
        let data = this.shopInfo;
        if (!this.showLoad) {
            this.showLoad = true;
            save(data)
              .then(res => {
                this.showToast = true;
                if (res.data.code == 1) {
                  this.showText = "修改成功";
                  setTimeout(()=>{
                      this.$router.back()
                  },1500)
                } else {
                  this.showText = res.data.msg;
                }
                this.showLoad = false;
              })
              .catch(err => {
                this.showLoad = false;
                this.showToast = true;
                this.showText = "网络超时";
              });
          }
      },
      getLogoFn(src){
        this.shopInfo.shop_logo = src
      },
      getBackImg(src) {
        //背景图
        this.shopInfo.shop_background_img = src;
      },
      getData(){
        let data = {}
        show(data).then(res => {
          if (res.data.code == 1) {
            this.shopInfo = res.data.data
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
      },
    },
    mounted() {},
    created() {
      this.getData()
    }
  };
  </script>
  
  <style scoped lang="less">
  .editShopCont {
    width: 100%;
    background-color: #f9f1f1;
    padding-bottom: 1rem;
    box-sizing: border-box;
    overflow: hidden;
    .addTip{
        font-weight: bold;
        margin-bottom: 1.25rem;
    }
    .formCont {
      width: 92%;
      margin: 0 auto;
      margin-top: 0.75rem;
      padding: 1rem 4%;
      border-radius: 0.25rem;
      background-color: #fff;
      box-sizing: border-box;
      .formItem {
        padding: 0.25rem 0;
        width: 100%;
        display: flex;
        position: relative;
        min-height: 2.2rem;
        border-bottom: 1px solid rgb(245, 245, 245);
        .formName {
          width: 4rem;
          font-size: 0.7rem;
          color: #646566;
          margin-right: 0.75rem;
          box-sizing: border-box;
        }
        .tagCont {
          width: 2.5rem;
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          .tagItem {
            width: 30%;
            padding: 0.35rem 0;
            text-align: center;
            background-color: #ccc;
            color: white;
            box-sizing: border-box;
            margin-bottom: 0.75rem;
            font-size: 0.6rem;
          }
          .tagActive {
            color: white;
            background-color: #556dea;
          }
        }
        .formDates {
          flex: 1;
          display: flex;
          align-items: center;
          .formDateItem {
            display: flex;
            align-items: center;
            a {
              display: flex;
              align-items: center;
            }
          }
        }
        .imgTip {
          position: absolute;
          bottom: 0.5rem;
          left: 4.75rem;
          font-size: 0.6rem;
          color: #666;
        }
  
        .mapTip {
          color: #556dea;
          font-size: 0.6rem;
        }
      }
      .flexCenter {
        align-items: center;
      }
      .hasMargin {
        margin-top: 1rem;
      }
      .flexItem{
        flex: 1;
        width: 2rem;
      }
      .noBorder {
        border-bottom: none;
      }
      .noflex {
        display: block;
      }
    }
  }
  </style>
  <style>
  .van-field__label {
    width: 4rem;
  }
  .formCont .van-cell {
    padding: 0.5rem 0;
  }
  .van-cell::after {
    border-bottom: none;
  }
  .van-field__error-message {
    color: #556dea;
  }
  </style>
  <style>
  .formPhone .van-field__label{
      line-height: 33px;
  }
  </style>